<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS --><!--地址改成从cdn服务器 稳定性高-->
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
  <style>
    .el-header{
      background-color: #0aa1ed;
      color: #333;
      text-align: center;
      line-height: 60px;
    }
    .el-footer{
      background-color: #282c30;
      color: #333;
      text-align: center;
    }

    .el-aside {
      background-color: #D3DCE6;
      color: #333;
      text-align: center;
      line-height: 200px;
    }

    .el-main {
      background-color: #E9EEF3;
      color: #333;
      text-align: center;
      /*line-height: 160px;*/
    }

    body > .el-container {
      margin-bottom: 40px;
    }


    .el-header a {
      color: white;
      margin: 0 20px;
      text-decoration: none;
    }

    .xiazai{
      display: inline-block;
      width: 100px;
      text-decoration: none;
      color: white;
      margin-top: 10px;
      margin-left: 50px;
    }

    body{
      margin: 8px 0;
    }
  </style>
</head>
<body>
<div id="app">
  <el-container>
    <!--头部-->
    <el-header>
      <img src="https://www.kugou.com/common/images/kugou_white.png" style="width: 150px;vertical-align: middle">
      <div style="display: inline-block; margin: 0 100px 0 30px;border-radius: 50px">
        <el-input placeholder="">
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
      </div>
      <a href="">音乐人</a>
      <a href="">音频创作</a>
      <a href="">VIP会员</a>
      <el-divider direction="vertical"></el-divider>
      <el-button round style="width: 100px;margin-left: 30px">登录</el-button>
    </el-header>


    <el-main>
      <div style="background-color:rgba(0, 169, 255, 0.04);">
        <el-menu style="width: 1200px;margin: 0 auto;"
                 mode="horizontal"
                 text-color="#000" active-text-color="#0aa1ed">
          <el-menu-item index="1"></el-menu-item>
          <el-menu-item index="1">榜单</el-menu-item>
          <el-menu-item index="2">听书</el-menu-item>
          <el-menu-item index="3">直播</el-menu-item>
          <el-menu-item index="4">商城</el-menu-item>
          <el-menu-item index="5">下载酷狗</el-menu-item>
          <el-submenu index="6">
            <template slot="title">
              <span>更多</span>
            </template>
            <el-menu-item index="6-1">频道</el-menu-item>
            <el-menu-item index="6-2">MV</el-menu-item>
            <el-menu-item index="6-2">歌单</el-menu-item>
            <el-menu-item index="6-2">歌手</el-menu-item>
            <el-menu-item index="6-2">专辑</el-menu-item>
          </el-submenu>
        </el-menu>
      </div>
      <div style="width: 1200px;margin: 0 auto">
        <el-carousel height="300px">
          <el-carousel-item v-for="url in urls">
            <img :src="url" width="100%" height="100%">
          </el-carousel-item>
        </el-carousel>
      </div>
      <div style="background-color: #475669;width: 1200px;height:40px; margin: 0 auto;padding: 0">
        <a class="xiazai" href="">下载电脑版</a>
        <a class="xiazai" href="">下载苹果版</a>
        <a class="xiazai" href="">下载安卓版</a>
      </div>

      <div style="width: 1200px;margin: 0 auto">
        <el-row>
          <el-col span="16">
            <div style="text-align: left;overflow:hidden;padding-top: 20px">
              <span style="font-size: 26px;">精选歌单</span>
            </div>
            <el-row gutter="20">
              <el-col span="12">
                <div>
                  <el-card>
                    <img src="https://imgessl.kugou.com/soft/collection/480/20211119/20211119224246993450.jpg" width="100%">
                  </el-card>
                </div>
              </el-col>
              <el-col span="12">
                <el-row>
                  <el-col span="12">
                    <el-card>
                      <img src="https://imgessl.kugou.com/custom/150/20220131/20220131165743484047.jpg" width="100%">
                    </el-card>
                  </el-col>
                  <el-col span="12">
                    <el-card>
                      <img src="https://imgessl.kugou.com/custom/150/20220324/20220324224709417523.jpg" width="100%">
                    </el-card>
                  </el-col>
                  <el-col span="12">
                    <el-card>
                      <img src="https://imgessl.kugou.com/custom/150/20220125/20220125211030646597.jpg" width="100%">
                    </el-card>
                  </el-col>
                  <el-col span="12">
                    <el-card>
                      <img src="https://imgessl.kugou.com/soft/collection/150/20220924/20220924221042123063.jpg" width="100%">
                    </el-card>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </el-col>
          <!--中间右部分-->
          <el-col span="8">
            <div style="text-align: left;overflow:hidden;padding-top: 20px;margin-left: 20px">
              <span style="font-size: 26px;">热门榜单</span>
            </div>
            <div style="margin-left: 20px;text-align: left">
              <el-row gutter="20">
                <el-col span="8">
                  <img src="https://www.kugou.com/common/images/rank_i1.png" width="100%">
                </el-col>
                <el-col span="16">
                  <p>1.旅行新蜜蜂-金蜂玉露</p>
                  <p>2.黄霄云-要不然我们就...</p>
                  <p>3.赵雷-鼓楼</p>
                </el-col>
              </el-row>
            </div>
            <div style="margin-left: 20px;text-align: left">
              <el-row gutter="20">
                <el-col span="8">
                  <img src="https://www.kugou.com/common/images/rank_i2.png" width="100%">
                </el-col>
                <el-col span="16">
                  <p>1.尹昔眠 - 三拜红尘凉</p>
                  <p>2.容祖儿 - 就让这大雨全都落下</p>
                  <p>3.赵雷-鼓楼</p>
                </el-col>
              </el-row>
            </div>
            <div style="margin-left: 20px;text-align: left">
              <el-row gutter="20">
                <el-col span="8">
                  <img src="https://www.kugou.com/common/images/rank_i3.png" width="100%">
                </el-col>
                <el-col span="16">
                  <p>1.好多倩 - 月亮不曾奔我而来</p>
                  <p>2.黄霄云-要不然我们就...</p>
                  <p>3.承桓 - 我会等 (Live现场版)</p>
                </el-col>
              </el-row>
            </div>
          </el-col>
        </el-row>
      </div>

    </el-main>

    <!--底部-->
    <el-footer style="height: 230px">
<!--      <div style="height: 90px;background-image: url('imgs/wave.png')"></div>-->
      <div style="background-color: #282c30;text-align: center;
            color: #666;padding: 50px 0">
        <p>粤公网安备 44030002000001号 互联网宗教信息服务许可证 粤（2022）0000022</p>
        <p>酷狗不良信息举报邮箱：jubao_music@kugou.net 客服电话：020-29195668（7*24小时热线）</p>
        <p>Copyright © 2004-2023 KuGou-Inc.All Rights Reserved</p>
      </div>
    </el-footer>
  </el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
 let v = new Vue({
    el: '#app',
    data: function() {
      return {
        urls:["https://imgessl.kugou.com/commendpic/20221012/20221012151627352369.jpg",
          "https://imgessl.kugou.com/commendpic/20230413/20230413221011523430.jpg",
          "https://imgessl.kugou.com/commendpic/20230413/20230413220915504919.jpg",
        "https://imgessl.kugou.com/commendpic/20230413/20230413221126453823.jpg",
        "https://imgessl.kugou.com/commendpic/20230413/20230413221814819907.jpg"]
      }
    },
   methods:{

   }
  })
</script>
</html>